<template>
  <div class="layout" >
      <audio src="/Alarm.wav" type="audio/wav" ref="audioRef"></audio>
      <el-container>
          <el-header style="text-align: left; font-size: 12px">
              <el-row type="flex" class="row-bg" justify="space-around">
                  <el-col>
                        <span class="sys_title"><span class="el-icon-odometer"></span> 广科故障报修维护系统</span>
                  </el-col>
                  <el-col class="right_box">
                          <div class="room_box">
                              <el-button :type="filteredNewReport.length>0?'danger':''" icon="el-icon-message" circle
                              @click="$router.push('/')"></el-button>
                              &nbsp;
                              <span class="el-icon-table-lamp"></span>  &nbsp;
                              <span id="room_info">{{$store.state.userState.uname||""}}</span>
                              <span>&nbsp;</span>&nbsp;
                              <el-button size="small" type="primary" plain @click="$router.push('/login')">注销</el-button>
                          </div>
                  </el-col>
              </el-row>
          </el-header>
            <router-view name="layout_rv" ></router-view>
      </el-container>
  </div>
</template>
<style lang="scss" scoped>
    @import "../assets/scss/base.scss";
    .sys_title{
        font-size: $large;
        color: #409EFF;
    }
  .el-header {
    background-color: white;
      border-bottom: 1px solid rgba(0,0,0,0.1);
    color: #333;
    line-height: 60px;
      .right_box{
          width: 300px;
            .room_box{
                font-size: $medium;
                text-align: right;
                color:rgba(#409EFF,0.7);

            }
      }
  }

  .el-aside {
    color: #333;
  }
    .item {
        /*margin: 10px 40px;*/
        /*margin-top: 10px;*/
        /*margin-right: 40px;*/
        /*.l-icon{
            transform: translate(0px,-10px);
        }*/

    }
</style>
<script>
// @ is an alias to /src
import FrmFeService from '../service/FrmFeService'
import storeUtil from '../utils/storeUtil'
import {baseURL} from '../service/ajax/ApiCaller'
export default {
    computed:{
        ...storeUtil.makeFields(['clientMsgVersion','serverMsgVersion','newReport','audioRef']),
        filteredNewReport(){
            let app=this
            return app.newReport.filter(function (x) {
                    if(!app.$store.state.listenAllRoom&&(x.room!==app.$store.state.userState.room))
                    {
                        return false
                    }
                    return true
                }
            )
        }
    },
    created(){
        let app=this
        eventBus.$on('ring',function(data){
            console.log("RECV RING EVENT")
            app.$refs.audioRef.play()
        });
    },
    beforeMount() {
       this.init()
    },
    data() {
        return {

            activeName: 'second',
            tableData: [{
                date: '2016年05月02日',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016年05月04日',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016年05月01日',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016年05月03日',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        };
    },
    methods: {
        async init(){

            try {
                let p = await FrmFeService.getHeroState()

                if (p.status!=200||p.data.stateCode != 'OK') {
                    this.$router.push('/login')
                }

                else {
                    this.$store.commit('setUserState', p.data.data)
                }
            }
            catch (e) {
                this.$router.push('/login')
            }

        },
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
  name: 'home',
  components: {

  }
}
</script>
